<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>示例demo</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
</body>
<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).extend({
        layuiTableColumnEdit:'js/layuiTableColumnEdit'
    }).use(['table','layuiTableColumnEdit','layer'], function () {
        var table = layui.table,layer = layui.layer;
        var layuiTableColumnEdit = layui.layuiTableColumnEdit;
        var $ = layui.$;

        var rowData; //当前行数据

        table.render({
            elem: '#tableId'
            ,id:'id'
            ,url:'tableData.json'
            ,height: 'full-90'
            ,page: true
            ,cols: [[
                {type:'checkbox'}
                ,{field:'name',title: 'table输入框',width:120}
                ,{field:'age', title: 'table点击事件',width:120,event:'age',sort:'true'}
                ,{field:'state', title: 'ajax传参',width:120}
                ,{field:'test', title: '数组传参',width:120,sort:'true'}
            ]],
            done:function (res, curr, count) {
                layuiTableColumnEdit.render({
                    id:'#tableId',
                    type:'select',
                    field:'state',
                    url:'selectData.json',
                    where:{},
                    callback:function (obj) {
                        console.log(obj.select); //下拉选项数据
                        console.log(obj.td); //当前单元格（td）DOM元素
                        //把选择的数据更新到行数据中
                        //rowData.update({state:parseInt(obj.select.name)});
                        //把选择的显示数据更新到单元格中显示
                        obj.update();
                        var testTd = $(obj.td.parentNode).find("td[data-field='test']").eq(0);
                        var selectParams = [
                            {name:1,value:"张三1"},
                            {name:2,value:"张三2"},
                            {name:3,value:"张三3"},
                            {name:4,value:"张三4"},
                            {name:5,value:"张三5"}
                        ];
                        layuiTableColumnEdit.render({
                            id:'#tableId',
                            type:'tdSelect',
                            element:testTd,
                            data:selectParams,
                            callback:function (obj) {
                                console.log(obj.select); //下拉选项数据
                                console.log(obj.td); //当前单元格（td）DOM元素
                                //把选择的数据更新到行数据中
                                rowData.update({test:parseInt(obj.select.name)});
                                //把选择的显示数据更新到单元格中显示
                                obj.update();
                            }
                        });
                    }
                });
            }
        });

        //解决前端页面排序出现的bug
        table.on('sort(tableEvent)', function(obj){
            layuiTableColumnEdit.reload("#tableId");//参数为表格id
        });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(tableEvent)', function(obj){
            rowData = obj;
        });
    });
</script>
</html>